<template>
	<view :style="{height:getSystemInfo}" class="popupShop">
		<!-- 头部 -->
		<view class="searchHead">
			<u-search placeholder="请输入店铺名称" height="40px" v-model="searchTextPop" @search="searChange('click')"
			:showAction="false" @clear="searchClear" @change="searChange('')">
			</u-search>
		</view>
		<template v-if="JSON.stringify(userInfo)!='{}'">
			<my-scroll-list  ref="businessPop" :requestUrl="requestUrl" HearHeight="55">
				<template #ScrollMyList="{contentScrollList}">
					<view style="padding:10px 0;border-bottom:1px solid #cdcdcd;text-indent: 2rem;" v-for="item in contentScrollList" :key="item.id" 
					    @click="shopNameChange(item.avatarName)">
						{{item.avatarName}}
					</view>
			    </template>
			</my-scroll-list>
		</template>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		name:"my-popup-list",
		props:{
			requestUrl:{//请求路径
				type:String,
				require:true,
			},
			requestName:{//请求参数名称
				type:String,
				require:true,
			}
		},
		data() {
			return {
				searchTextPop:'',
				popTimer:null,// 延时器
			};
		},
		computed:{
			...mapState('m_user',['userInfo']),
			getSystemInfo(){
				return uni.$u.sys().windowHeight + 'px'
			}
		},
		methods:{
			searchClear(){//清空内容
				this.searchTextPop=''
			},
			searChange(type='',value=this.searchTextPop){//搜索
				if(!value&&type){
					return uni.$u.toast('请输入搜索内容！')
				}
				let param={
					[this.requestName]:value,
				}
				clearTimeout(this.popTimer)
				this.popTimer = setTimeout(() => {
				    if(!value){
						this.$refs.businessPop.searParams={}
				    	this.$refs.businessPop.getListData(false,true)
				    	return
				    }
					this.$refs.businessPop.searParams=param
				    this.$refs.businessPop.getListData(false,true,param)
				}, 500)
			},
			shopNameChange(value){////点击数据时 
				this.$emit('popupItemClick',value)
			}
		}
	}
</script>

<style lang="scss" scoped>
.popupShop{
	background:#fff;
	.searchHead{
		border-bottom:1px solid #cdcdcd;
		height:55px;
		padding:0 20px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
	.content{
		padding:10px 0;
		border-bottom:1px solid #cdcdcd;
		text-indent: 2rem;
	}
}
</style>